<template>
    <div class="container" v-cloak>
        <div class="blurBg" :style="{background:'url('+blurBg+') 0 0 no-repeat'}"></div>
        <div class="dataInfo">
            <div class="titleCtrl" flex="main:justify cross:center" v-if="unUploadList&&unUploadList.length>0"
                 @click="changeCtrl(1)">
                <div class="font10">本次未发</div>
                <img src="../../images/triangle.png" class="triangle" ref="unTriangle"/>
            </div>
            <ul class="studentList" v-if="unUploadShow">
                <li v-for="(student,index) in unUploadList" v-if="student.infoMap&&student.infoMap.state==-1"
                    @click="toDetail(student)">
                    <div class="headerWrap">
                        <img :src="student.photoUrl+'?imageView2/0/w/80/format/jpeg'" class="headerPhoto"/>
                        <img src="../../images/upload.png" class="upload"/>
                    </div>
                    <div class="studentName font10 Medium" flex="main:center" v-text="student.studentName"></div>
                    <div class="studentNameEN font10 Medium" flex="main:center" v-text="student.studentNameEN"></div>
                </li>
            </ul>
            <div class="titleCtrl" flex="main:justify cross:center" v-if="uploadList&&uploadList.length>0"
                 @click="changeCtrl(2)">
                <div class="font10">本次待发</div>
                <img src="../../images/triangle.png" class="triangle" ref="triangle"/>
            </div>
            <ul class="studentList btnBottom" v-if="uploadShow">
                <li v-for="(student,index) in uploadList" v-if="student.infoMap&&student.infoMap.state>-1"
                    :style="{marginRight:(index+1)%4===0?0:0.42+'rem'}" @click="toDetail(student)">
                    <div class="headerWrap">
                        <img :src="student.photoUrl+'?imageView2/0/w/80/format/jpeg'" class="headerPhoto"/>
                        <img src="../../images/finish.png" class="upload"
                             v-if="student.infoMap&&student.infoMap.state==1"/>
                        <img src="../../images/uploading.gif" class="upload"
                             v-if="student.infoMap&&student.infoMap.state==0"/>
                        <img src="../../images/delete.png" class="delete" @click.stop="removeInfo(student,index)"/>
                    </div>
                    <div class="studentName font10 Medium" flex="main:center" v-text="student.studentName"></div>
                    <div class="studentNameEN font10 Medium" flex="main:center" v-text="student.studentNameEN"></div>
                </li>
            </ul>
            <div class="allSendBtn" flex="main:center cross:center" @click="send"
                 v-if="(uploadList&&uploadList.length>0)||(unUploadList&&unUploadList.length>0)">发送
            </div>
            <div class="noStudentWrapper" flex="main:center cross:center"
                 v-if="(uploadList.length<=0)&&(unUploadList.length<=0)&&!loading">暂时还没有学员 请添加学员
            </div>
            <div class="noStudentWrapper" flex="main:center cross:center"
                 v-if="(uploadList.length<=0)&&(unUploadList.length<=0)&&loading">学员加载中 请稍后
            </div>
        </div>
        <confirm ref="confirm" @confirm="confirmEvent" :msg="'是否删除学员作品?'"></confirm>
    </div>
</template>
<script>
    import API from '../../../api/api.js'
    import {domain, imagedomain} from '../../../api/api.js'
    import confirm from '../../../components/confirm.vue'
    const api = new API();
    export default{
        data(){
            return {
                loading:true,
                classId: this.$route.query.classId ? this.$route.query.classId : '',
                domain: domain,
                studentList: [],
                unUploadList: [],
                unUploadShow: true,
                uploadList: [],
                uploadShow: true,
                opusId: '',
                upload: false,
                removeIndex: '',
                student: '',
                intervalId: ''
            }
        },
        components: {
            confirm
        },
        mounted(){
            this.$util.jsBridgeCallBack('jsLeftAction', this.closeWebView);
            this.$nextTick(function () {
                setTimeout(() => {
                    this.propsTitle();
                }, 300);
                this.getData();
                this.intervalFun();
            })
        },
        methods: {
            intervalFun(){
                this.intervalId = setInterval(() => {
                    try {
                        if (this.checkIfUpload()) {
                            clearInterval(this.intervalId);
                        } else {
                            this.getData();
                        }
                    } catch (e) {

                    }
                }, 5000)
            },
            checkIfUpload(){
                let allUpload = true;
                this.uploadList.forEach((el, index) => {
                    if (el.infoMap.state == 0) {
                        allUpload = false;
                        return;
                    }
                });
                return allUpload;
            },
            propsTitle(){
                this.$util.JsBridge('propsTitle', {
                    title: '选择学员',
                }, (res) => {
                })
            },
            getData(){
                this.loading=true;
                let param = {
                    classId: this.classId,
                };
                api.getUploadStuList(param).then(res => {
                    let {code, rs} = res;
                    if (code == 200) {
                        this.uploadList = [];
                        this.unUploadList = [];
                        rs.opus.list.map((e) => {
                            if (e.photoUrl === '') {
                                e.photoUrl = this.$util.getDefaultHeader(e.studentId)
                            }
                            if (e.infoMap.state > -1) {
                                this.uploadList.push(e);
                                this.upload = true;
                            } else {
                                this.unUploadList.push(e);
                            }
                        });
                        this.studentList = rs.opus.list;
                        this.opusId = rs.opus.tid;
                    }else{
                        this.$util.sendLog(1,'APP_OPUS',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'今日作品',code:'APP_OPUS',path: '/app/addList/add',api:'getUploadStuList',success:false,data:res}));
                    }
                    this.$nextTick(function () {
                        document.documentElement.scrollTop=1;
                        document.body.scrollTop=1;
                        this.loading=false;
                    })
                }).catch(()=>{
                    this.loading=false;
                    this.$util.sendLog(1,'APP_OPUS',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'今日作品',code:'APP_OPUS',path: '/app/opus/addList',api:'getUploadStuList',success:false,data:'网络异常'}));
                });
            },
            changeCtrl(type){
                if (type === 1) {
                    this.unUploadShow = !this.unUploadShow;
                    this.$refs.unTriangle.style.transform = this.unUploadShow ? 'rotate(0deg)' : 'rotate(180deg)'
                    this.$refs.unTriangle.style.webkitTransform = this.unUploadShow ? 'rotate(0deg)' : 'rotate(180deg)'
                } else {
                    this.uploadShow = !this.uploadShow;
                    this.$refs.triangle.style.transform = this.uploadShow ? 'rotate(0deg)' : 'rotate(180deg)'
                    this.$refs.triangle.style.webkitTransform = this.uploadShow ? 'rotate(0deg)' : 'rotate(180deg)'
                }
            },
            toDetail(student){
                if (student.infoMap.state == 0) {
                    return;
                }
                clearInterval(this.intervalId);
                this.$router.push({
                    path: '/app/opus/add',
                    query: {appId: this.opusId, classId: this.classId, studentId: student.studentId}
                })
            },
            closeWebView(){
                clearInterval(this.intervalId);
                this.$util.JsBridge('closeWebView', {}, () => {
                })
            },
            removeInfo(student, index){
                this.removeIndex = index;
                this.student = student;
                this.$refs.confirm.confirmShow = true;
            },
            confirmEvent(){
                let param = {
                    stuOpusId: this.student.infoMap.stuOpusId
                };
                api.deletePersonOpus(param).then(res => {
                    let {code, rs} = res;
                    if (code == 200) {
                        this.$refs.confirm.confirmShow = false;
                        this.$set(this.uploadList[this.removeIndex].infoMap, 'state', -1);
                        this.unUploadList.unshift(this.uploadList[this.removeIndex]);
                        this.uploadList.splice(this.removeIndex, 1);
                        this.$toast('删除成功', true);
                    }else{
                        this.$util.sendLog(1,'APP_OPUS',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'今日作品',code:'APP_OPUS',path: '/app/opus/addList',api:'deletePersonOpus',success:false,data:res}));
                    }
                }).catch(()=>{
                    this.$util.sendLog(1,'APP_OPUS',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'今日作品',code:'APP_OPUS',path: '/app/opus/addList',api:'deletePersonOpus',success:false,data:'网络异常'}));
                });
            },
            send(){
                if (!this.upload) {
                    this.$toast('请至少为1名学员上传附件');
                    return;
                }
                if (!this.checkIfUpload()) {
                    this.$toast('作品上传中,请稍后');
                    return
                }
                let param = {
                    classId: this.classId,
                    opusId: this.opusId
                };
                api.sendOpus(param).then(res => {
                    let {code, rs} = res;
                    if (code == 200) {
                        this.$toast('成功', true);
                        this.closeWebView();
                    }else{
                        this.$util.sendLog(1,'APP_OPUS',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'今日作品',code:'APP_OPUS',path: '/app/opus/addList',api:'sendOpus',success:false,data:res}));
                    }
                }).catch(()=>{
                    this.$util.sendLog(1,'APP_OPUS',JSON.stringify({time:new Date().Format('yyyy/MM/dd hh:mm'),name:'今日作品',code:'APP_OPUS',path: '/app/opus/addList',api:'sendOpus',success:false,data:'网络异常'}));
                });
            }
        }
    }
</script>
<style lang="scss" scoped>
    .container {
        width: 100%;
        height: 100%;
        background: #000;
        position: relative;
    }

    .titleCtrl {
        background: rgba(0, 0, 0, .2);
        width: 100%;
        height: 0.3rem;
        padding: 0 0.12rem;
    }

    .triangle {
        width: 0.08rem;
        height: 0.04rem;
    }

    .studentList {
        overflow: hidden;
        padding: 0 0.12rem;
        .headerWrap {
            width: 0.56rem;
            height: 0.56rem;
            border-radius: 100%;
            position: relative;
            .headerPhoto {
                width: 100%;
                height: 100%;
                border-radius: 100%;
            }
            .upload {
                width: 0.17rem;
                height: 0.17rem;
                position: absolute;
                border-radius: 100%;
                right: 0;
                bottom: 0;
            }
            .delete {
                width: 0.17rem;
                height: 0.17rem;
                position: absolute;
                border-radius: 100%;
                right: 0;
                top: 0;
            }
        }
        li {
            width: 0.56rem;
            margin-top: 0.12rem;
            margin-right: 0.42rem;
            float: left;
        }
        li:nth-child(4n) {
            margin-right: 0;
        }
        .studentName {
            margin-top: 0.05rem;
            height: 0.16rem;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .studentNameEN {
            height: 0.16rem;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
    .btnBottom {
        padding-bottom: 0.84rem;
    }
</style>